<!-- Sidebar.vue -->
<template>
  <div class="sidebar">
    <!-- 个人信息 -->
    <div class="profile">
      <img :src="avatar" alt="Avatar" />
      <h3>{{ name }}</h3>
      <p>{{ description }}</p>
      <p>文章：{{ articleCount }}</p>
      <p>标签：{{ tagCount }}</p>
      <button @click="goToHomePage">个人主页</button>
    </div>

    <!-- 天气信息 -->
    <div class="weather">
      <p>{{ weather.temperature }}°C / {{ weather.windSpeed }}° 风</p>
      <p>{{ weather.date }}</p>
      <p>{{ weather.city }}</p>
    </div>

    <!-- 标签云 -->
    <div class="tags">
      <h4>标签</h4>
      <ul>
        <li v-for="tag in tags" :key="tag">{{ tag }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import avatar from "@/assets/imgs/my-avatar.png"
export default {
  data() {
    return {
      avatar: avatar,
      name: '源',
      description: '从你的全世界路过...',
      articleCount: 7,
      tagCount: 6,
      weather: {
        temperature: '10',
        windSpeed: '9-12',
        date: '03-30 周日',
        city: '广州市'
      },
      tags: ['koa', 'typescript', 'node', 'vue', '博客搭建']
    };
  },
  methods: {
    goToHomePage() {
      // 跳转到个人主页逻辑
    }
  }
};
</script>

<style scoped>
.sidebar {
  text-align: left;
  width: 100%;
}
.profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fff;
  padding: 16px 25px;
  border-radius: 20px;
}
.profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.profile h3 {
  margin-bottom: 10px;
}

.profile p {
  margin-bottom: 10px;
}

.weather,
.tags {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fff;
  padding: 16px 25px;
  border-radius: 20px;
  margin-top: 20px;
}

.weather p,
.tags p {
  margin: 5px 0;
}

.tags ul {
  list-style-type: none;
  margin-top: 16px;
  padding: 0;
}

.tags li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border-radius: 15px;
  margin-bottom: 5px;
}
</style>